<template>
    <component is="a-modal" v-model:visible="visible" :hide-cancel="true" width="70%" :title="title"
        :mask-closable="false" @cancel="close" @ok="close">
        <a-row>
            <a-col>
                <a-button type="primary" style="margin-bottom: 20px;" @click="handleAdd">
                    <icon-plus />新增
                </a-button>
            </a-col>
        </a-row>
        <a-table :loading="loading" :pagination="false" :columns="columns" :data="tableData" :stripe="true"
            :scroll="{ y: '60vh' }">
            <template #operation="{ record }">
                <a-space>
                    <a-link type="primary" size="small" @click="editRow(record)">编辑</a-link>
                    <a-popconfirm
                        content="确定要刪除该数据吗?"
                        position="bottom"
                        @ok="deleteAction(record)">
                        <a-link type="primary" >
                            <icon-delete /> {{ '刪除' }}
                        </a-link>
                    </a-popconfirm>
                </a-space>
            </template>
        </a-table>
        <a-pagination class="pagination" @change="pageChange" @page-size-change="limitChange" :total="total"
            :show-total="true" :current="queryParams.page" :page-size="queryParams.limit" show-total show-jumper
            show-page-size />
        <lang-content ref="editRef" @success="getData"> </lang-content>
    </component>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import mallApi from '@/api/system/mall'
import langContent from  './lang_content.vue'
const emit = defineEmits(['success'])
const visible = ref(false)
const   editRef=ref()
const switchLoading = ref(false)
import throttle from 'lodash/throttle'
import { Message } from '@arco-design/web-vue'
const loading = ref(false)
const title = ref('')
const type=ref('')
const searchForm = reactive({
    id: ''
})
const total = ref(0)
const queryParams = ref({
    page: 1,
    limit: 10,
})
const open = async (data) => {
    type.value= data.type
    visible.value = true
    searchForm.id = data.id
    title.value = `多语言列表`
    getData()
}
const columns = reactive([
    { title: 'ID', dataIndex: 'id', width: 100, align: 'center' },
    { title: '语言', dataIndex: 'lang_title', width: 100, align: 'center' },
    { title: '更新时间', dataIndex: 'update_time', width: 100, align: 'center' },
    { title: '创建时间', dataIndex: 'create_time', width: 100, align: 'center' },
    { title: '操作', slotName: 'operation', width: 100, align: 'center' },
])
const handleAdd=()=>{
    editRef.value?.open('add',searchForm.id)
}
const editRow= (row)=>{
    editRef.value?.open('edit',searchForm.id,row.id)
    editRef.value?.setFormData(row)
}
const pageChange = (page) => {
    queryParams.value.page = page;
    getData()
};
const limitChange = (limit) => {
    queryParams.value.limit = limit;
    queryParams.value.page = 1
    getData()
};
const tableData = ref([])
const getData = async () => {
    loading.value = true
    const { data } = await mallApi.language_cate(searchForm.id, queryParams.value)
    tableData.value = data.data
    total.value = data.total
    loading.value = false
}
const deleteAction=async(record)=>{
    const {data} =await mallApi.del_cate_language({id:record.id})
    Message.success('刪除成功')
    getData()
}
const close = () => (visible.value = false);
defineExpose({
    open
})
</script>
<style lang="less" scoped>
.pagination {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}
</style>